
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2.5, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" href="js/jquery.mobile-1.4.3/jquery.mobile-1.4.3.min.css" />
        <link rel="stylesheet"  href="css/icon-pack-custom.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Tacks</title>
    </head>
    <body onload="chargeRequestsFunction();">
        <!-- Page principal -->
        <div data-url="main-page" data-role="page" id="main-page">    
            <div data-role="header" data-theme="a" data-position="fixed">
                <h1 style="margin-left: 1em; margin-right: 1em;">TACKS</h1>
                <a href="#left-panel" id="bnt-menu" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="true" class="ui-nodisc-icon" style="background : #38c;margin-top : 1%;"></a>
                <a href="#" data-icon="refresh" data-iconpos="notext" onclick="location.reload()" style="background-color: #38c;margin-top : 1%;"></a>
            </div>
            <!-- /header -->
            <div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-theme="a"style="width: auto;" >            	
				<ul id="main-menu" data-role="listview" data-inset="true" data-count-theme="b">
					<li><a href="#espace_page" id="userPage" class="ui-btn ui-btn-b ui-shadow ui-corner-all">
				        <img id="userImageMenu" src="img\png_images\user_icon.png" style="margin-left: 5%; margin-top: 6%;">
					    <h2 id="userLoged"> </h2>
					    <p id="userDroit"> </p></a>
				    </li>
				    <li id="btn-gestionUsers"><a href="#users_page" id="mgntUsers" class="ui-btn ui-shadow ui-corner-all ui-icon-group ui-btn-icon-left" onclick="getUsersFamillyList();"> Gestion utilisateurs </a></li>
					<li><a href="#equipements_page" class="ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-left">Pièces et équipements </a></li>
					<li><a id="evenement" href="#evenement_page" class="ui-btn ui-shadow ui-corner-all ui-icon-clock ui-btn-icon-left">&Eacute;vènements <span id="nbEvenement" class="ui-li-count"></span></a></li>
				 	<li><a href="#camera_page" class="ui-btn ui-shadow ui-corner-all ui-icon-video ui-btn-icon-left" onclick="doCheckCamStatus('camera1')">Caméra 1</a></li> 
 					<li><a href="#camera_pageDeux" class="ui-btn ui-shadow ui-corner-all ui-icon-video ui-btn-icon-left" onclick="doCheckCamStatus('camera2')">Caméra 2</a></li> 
 					<li><a href="#camera_pageTrois" class="ui-btn ui-shadow ui-corner-all ui-icon-video ui-btn-icon-left" onclick="doCheckCamStatus('camera2')">Caméra 3</a></li> 
 					<li><a href="#graphic-page" class="ui-btn ui-shadow ui-corner-all ui-icon-eye ui-btn-icon-left">Graphiques</a></li> 
					<li><a href="#aPropos_page" class="ui-btn ui-shadow ui-corner-all ui-icon-info ui-btn-icon-left">A propos</a></li>
				</ul>
				<ul id="menu-deconnexion" data-role="listview" data-inset="true" data-count-theme="b">
					<li><a href="#" id="deconnexion" class="ui-btn ui-shadow ui-corner-all ui-icon-action ui-btn-icon-left">Déconnexion</a></li>
				</ul>
            </div>
            <div class="view" style="width:100%">           
                <img id="img_ID" width="100%" src="img/vueSmartphoneGlobal.png" alt="vue appartement 2D"/>           	 
            </div>
            <!-- /panel -->
        </div>
        

		<!-- ######## Create user page ######## -->
        <div data-role="page" id="createUserPage">
            <div data-role="header">
				<a href="users_page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
				<h1 style="margin-left: 1em; margin-right: 1em;">Nouvel utilisateur</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->
			<div id="createUserDiv" data-role="content">  
                <form id="createUserForm">
                    <div data-role="fieldcontain">
                        <input type="text" name="nom" id="nom" value="" placeholder="Nom" required/>      
                        <input type="text" name="prenom" id="prenom" value="" placeholder="Prenom" required/>      
                        <input type="email" name="email" id="email" value="" placeholder="Email" required/>      
                        <input type="tel" name="tel" id="tel" value="" placeholder="N° Téléphone" required/>   
                        <input type="text" name="login" id="login" value="" placeholder="Login" required/>   						
                        <input type="password" name="pwd" id="pwd" value="" placeholder="Mot de passe" required/>
						<input type="password" name="pass_confirm" id="pass_confirm" value="" placeholder="Confirmation mot de passe" required/>
                    </div>

					<div class="ui-field-contain">
						<fieldset data-role="controlgroup">
						<input type="radio" name="droit" id="superuser" value="superuser" checked="checked">
						<label for="superuser" id="superuserLabel">Super utilisateur</label>
						<input type="radio" name="droit" id="readwrite" value="readwrite" checked="checked">
						<label for="readwrite">Ecriture/Lecture</label>
						<input type="radio" name="droit" id="readonly" value="readonly">
						<label for="readonly">Lecture seule</label>
						</fieldset>
						<p id="alertAddUser" style="color: red;"> </p>
					</div>

                    <fieldset class="ui-grid-a">
                        <div class="ui-block-b"><input id="addUser" type="submit" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus" name="action" value="Valider"><input type="reset" value="Effacer" class="ui-btn ui-shadow ui-corner-all"></div>
                    </fieldset>
                </form>
            </div> <!-- /content -->
        </div><!-- /page -->
		
		<!-- ######## END page ######## -->
        
		<div data-role="page" id="users_page">
			<div id="headerPage" data-role="header">
				<a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
				<h1 style="margin-left: 1em; margin-right: 1em;">Gestion utilisateurs</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>

			</div><!-- /header -->
			<div data-role="main" class="ui-content">
				<form>
					<div class="ui-field-contain" >      
						<a href="#createUserPage" id="linkAddUser" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus" onclick="isPermitDisplayInput()" style="background-color: #38c;color : white;">Ajouter un utilisateur</a>
                    	<table data-role="table" id="TabListFamillyUsers" data-mode="" data-column-btn-theme="a" class="equipements-compare ui-shadow table-stroke">
	                        <tbody id="listFamillyUsers">
	                            <!-- Donnees issues de la BDD -->
	                            <img id="waitingUsersLoad" alt="" src="img/ajax-load-black.gif" style="display: none; position: relative; top: 50%; left: 50%; margin-top: 100px;">
	                        </tbody>  
                    	</table>
					</div>       
					<div data-role="popup" id="userFamPopupDialogDelete"  data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
                        <div data-role="header" data-theme="a" class="ui-corner-top">
                            <h1 style="margin-left: 1em; margin-right: 1em;">Supprimer utilisateur</h1>
                        </div>
                        <div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">
                            <h3 class="ui-title">Etes-vous sûr de vouloir supprimer cet utilisateur ?</h3>
                            <p>Cette action est définitive.</p>
                            <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Annuler</a>
                            <a href="#" id="deleteFamillyUser" data-role="button" data-inline="true" data-rel="back" data-theme="b">Supprimer</a>
                        </div>
                    </div>             
				</form>
			</div><!-- /content -->           
		</div><!-- /page -->
        <!-- Page menu espace personnel -->
        <div data-role="page" id="espace_page">

            <div data-role="header">
				<a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">Espace personnel</h1>

				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->
            
            <div role="main" class="ui-content">
				<div class="ui-field-contain" id="userInfos">
					<!-- Informations personnelles -->
					<ul data-role="listview" id="listInfosUser"> 
						<!-- content generate by javascript from serveur -->
						<img id="waitingUserInfoLoad" alt="" src="img/ajax-load-black.gif" style="disEspalay: none; position: relative; top: 50%; left: 50%; margin-top: 100px;">
					</ul>
				</div> 
				<fieldset class="ui-grid-a">
                       <p><a href="#updateUserInfosPwd" id="updateUserInfosPwdURL" class="ui-btn ui-shadow ui-corner-all">Modifier votre profil</a></p> 
            	</fieldset>
			</div><!-- /content -->           
        </div><!-- /page -->
        
               <!-- Page modification profile user perso -->
        <div data-role="page" id="updateUserInfosPwd">
            <div data-role="header">
                <a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
				<h1 style="margin-left: 1em; margin-right: 1em;">Modification profil</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->

            <div data-role="collapsible-set" data-theme="a" data-content-theme="a" role="main" class="ui-content">
                    <div id ="preferences" data-role="collapsible" data-collapsed="true" data-theme="a" class="ui-field-contain">
						<p><i id="updateInfosAlert" style="display: none;"></i></p>
                    	<p id="preferencesPara">
	                        <h4>Vos Préférences</h4>
	          				<input type="email" name="emailUpdate" id="emailUpdate" value="" placeholder="Email" required/>      
	                        <input type="tel" name="telUpdate" id="telUpdate" value="" placeholder="N° Téléphone" required/>   
	                        <span><input data-inline="true" id="updateUserInfos" value="Confirmer" type="submit" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus"></span>
                    	</p>
                    </div>

                    <div id="updatePasswordDiv" data-role="collapsible" data-collapsed="true" data-theme="a" class="ui-field-contain">
                    	
                        <h4>Modification mot de passe</h4> 
                        <p><i id="updatePasswordAlert" style="display: none;"></i></p>
                        <p id="paraFormPwd">
	                        <input type="password" name="passwordUpdate" id="passwordUpdate" value="" placeholder="Nouveau mot de passe" required/>
							<input type="password" name="pass_confirmUpdate" id="pass_confirmUpdate" value="" placeholder="Confirmation nouveau mot de passe" required/> 
	                        <span><input data-inline="true" id="updateUserPassword" value="Confirmer" type="submit" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus"></span>
                    	</p>
                    </div>

            </div><!-- /content -->           
        </div><!-- /page -->
        <!-- Page menu piece et equipements -->
        <div data-role="page" id="equipements_page">
            <div data-role="header">
				<a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">Pièces et équipements</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->

            <div role="main" class="ui-content">
                <form>      
					<a id="btnAddEquipements" href="#addEquipements_page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus" style="background : #38c;color : white;">Ajouter un équipement</a>     
                    <table data-role="table" id="equipements-table" data-mode="" data-column-btn-theme="a" class="equipements-compare ui-shadow table-stroke" style="width : 100%;">
                        <tbody id="listeEquipement">
                            <!-- Donnees issues de la BDD -->
                        </tbody>
                    </table>
                    <table data-role="table" id="pieces-table" data-mode="" data-column-btn-theme="a" class="equipements-compare ui-shadow table-stroke" style="width : 100%;display : none;">
                        <tbody id="listePieces">
                            <!-- Donnees issues de la BDD -->
                        </tbody>
                    </table>
                    <div>
                        <a id="btn_piece" href="#" data-role="button" data-inline="true">Pièces</a>  
                    </div>
                    
                   <div data-role="popup" id="popupDialogDelete"  data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
                        <div data-role="header" data-theme="a" class="ui-corner-top">
                            <h1 style="margin-left: 1em; margin-right: 1em;">Supprimer équipement</h1>
                        </div>
                        <div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">
                            <h3 class="ui-title">Etes-vous sûr de vouloir supprimer cet équipement?</h3>
                            <p>Cette action est définitive.</p>
                            <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Annuler</a>
                            <a href="#" class="deleteEquipmentBtn" data-role="button" data-inline="true" data-rel="back" data-theme="b">Supprimer</a>
                        </div>
                    </div>           
                </form>
                <div id="popupReglage">
                    
                </div>           
            </div><!-- /content -->           
        </div><!-- /page -->


        <!-- Page ajout equipement -->
        <div data-role="page" id="addEquipements_page">
            <div data-role="header">
				<a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">Ajouter équipement</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->
            
            <div role="main" class="ui-content">
                <form>
                    <div class="ui-field-contain" stlye="padding-top : 10px;">
                        <label for="nameEquipment">Identifiant</label>
                        <input name="nameEquipment" id="nameEquipment" placeholder="Nom équipement" value="" type="text" required>
                        <br>                       
                        <label for="select-choice-mini" for="select-choice-a" class="select">Sélectionner un équipement</label>
                        <div class="ui-grid-a ui-responsive">
                            <div class="ui-block-a">
                                <select name="select-choice-a" id="selectEquipment" data-native-menu="false">
                                    <option value="lampe">Lampe</option>
                                    <option value="prise">Prise connecté (Défaut)</option>
                                    <option value="detecteur">Détecteur</option>
                                </select>   
                            </div>                            
                        </div>
                   
                        <div> 
                            <a id="emplacement" href="#locationEquipment_page" class=" ui-shadow ui-btn ui-corner-all ui-mini">Emplacement... </a>
                            <input id="locationCheck" disabled="" data-mini="true" name="locationCheck" data-theme="a" type="checkbox" required>
                            <label for="locationCheck">Emplacement choisi</label>
                        </div>
                        <div>
                            <a id="coupleOutlet" href="#" class="ui-mini ui-btn-inline ui-shadow ui-btn ui-corner-all">Associer</a> 
                            <a id="helpCoupleOutlet" href="#popupInfo" style="border:none;border:0;" data-rel="popup" data-transition="pop" class="ui-btn my-tooltip-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Information sur l'association des prises">Informations sur l'association des prises</a>
                        </div>
                        <div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
                          <p>Pour associer la prise connectée, commencez par brancher la prise puis cliquez sur le bouton "Associer" dans les 5 secondes où vous l'avez branché. </p>
                        </div>
                        <input type="hidden" value="" id="coordX">
                        <input type="hidden" value="" id="coordY">
                        <input type="hidden" value="" id="codeRadio">
                    </div>
                    
                    <a id="cancelAddEquipment" href="#equipements_page" data-role="button" data-inline="true">Annuler</a>
                    <a id="saveEquipment" href="#" data-role="button" data-inline="true" data-theme="b" style="display : none;">Enregistrer</a>
                </form>
            </div><!-- /content --> 
            <div data-role="popup" id="popupDialogCouple"  data-theme="a" data-dismissible="false" style="max-width:400px;block" class="ui-corner-all">
                <div data-role="header" data-theme="a" class="ui-corner-top">
                    <h1 style="margin-left: 1em; margin-right: 1em;">Association</h1>
                </div>
                <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
                    <h3 class="ui-title">Est-ce que l'association a réussi?</h3>
                    <p><i>Si elle n'a pas fonctionné cliquez sur annuler et répétez l'opération</i></p>
                    <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Annuler</a>
                    <a href="#" id="validateCouple" data-role="button" data-inline="true" data-theme="b">Valider</a>
                </div>
            </div>
        </div><!-- /page -->
        
        <div data-role="page" id="locationEquipment_page">
            <div data-role="header">
                <h1 style="margin-left: 1em; margin-right: 1em;">Choix emplacement</h1>
            </div><!-- /header -->
            
            <div id="divImgHome" role="main" class="ui-content">               
                <p style="text-align : center">Déplacer l'équipement là où vous voulez le placer</p>
                <div id="divImgHome" style="width:100%">               
                    <img id="imgHome" width="100%" style="z-index : 1;" src="img/vueSmartphoneGlobal.png" alt="vue appartement 2D" /> 
                    <div id="equipementDraggable">
                        <div id="equipement"></div>
                    </div>      
                </div>
                <div data-role="popup" id="helpBadLocationEquipment" data-position-to="origin">
                    <p>Il existe déjà un équipement à cet emplacement.</p>
                </div>
                <div data-role="popup" id="popupDialogEmplacement"  data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
                    <div data-role="header" data-theme="a" class="ui-corner-top">
                        <h1 style="margin-left: 1em; margin-right: 1em;">Valider l'emplacement</h1>
                    </div>
                    <div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">
                        <h3 class="ui-title">Est-ce que cet emplacement vous convient?</h3>
                        <a href="#" id="cancelLocation" data-role="button" data-inline="true" data-rel="back" data-theme="c">Annuler</a>
                        <a href="#" id="verifValidateLocation" data-role="button" data-inline="true" data-theme="b">Valider</a>
                    </div>
                </div>
                <div style="float : right;">
                    <a href="#" id="validateLocation" data-role="button" data-inline="true" data-theme="b" onclick="$('#popupDialogEmplacement').popup( 'open' );">Valider</a>
                    <a id="backLocationPage" href="#addEquipements_page" data-inline="true" data-theme="c" data-role="button">Retour</a>
                </div>
            </div><!-- /content -->           
        </div><!-- /page -->
            
        <!-- Page DELETE USER or UPDATE DROIT USER -->
        <div data-role="page" id="usersSetting">
            <div data-role="header">
                <a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
				<h1 style="margin-left: 1em; margin-right: 1em;">Réglage utilisateur</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->

            <div role="main" class="ui-content">
            	<fieldset class="ui-grid-a">
                	<a href="#" id="deleteFamillyUser" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-delete">Supprimer utilisateur</a> 	
                </fieldset>
            	<form id="formUpdateFamUserInfos">
					<div class="ui-field-contain">
						<fieldset data-role="controlgroup">
						<input type="radio" name="droit" id="readwrite" value="readwrite" checked="checked">
						<label for="readwrite">Ecriture/Lecture</label>
						<input type="radio" name="droit" id="readonly" value="readonly">
						<label for="readonly">Lecture seule</label>
						</fieldset>
					</div>
					<fieldset class="ui-grid-a">
                        <div class="ui-block-b"><input id="updateFamUserDroit" type="submit" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus" name="action" value="Valider"></div>
                    </fieldset>
                </form>
            </div><!-- /content -->           
        </div><!-- /page -->
        
        <!-- Page visualisation cam -->
        <div data-role="page" id="camera_page">
            <div data-role="header">
				<a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">Caméra 1</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->
		
			<div>
				<select name="" id="camera1" data-role="flipswitch" data-theme="b" data-mini="true" onchange="isCameraStreamOrStop(this.id)">
					<!-- option added by JS -->
				</select>
			</div>
			
			<div id="webcam" role="main" style="width:100%;">    
				   <noscript><img src="http://tacks.fr:81/?action=snapshot" alt="Caméra non disponible"></noscript>
			</div>
			
        </div>       
        <!-- Fin page visualisation cam 1-->
        
        <!-- Page visualisation cam 2-->
        <div data-role="page" id="camera_pageDeux">
            <div data-role="header">
				<a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">Caméra 2</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->
			
			<div>
				<select name="" id="camera2" data-role="flipswitch" data-theme="b" data-mini="true" onchange="isCameraStreamOrStop(this.id)">
					<!-- option set by JS -->
				</select>
			</div>
			
			<div id="webcamDeux" role="main" style="width:100%;">    
				   <noscript><img src="http://tacks.fr:80/?action=snapshot" alt="Caméra non disponible"></noscript>
			</div>
			
        </div>       
        <!-- Fin page visualisation cam 2-->
        
        <!-- Page visualisation cam 3-->
        <div data-role="page" id="camera_pageTrois">
            <div data-role="header">
				<a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">Caméra 3</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->
			
			<div>
				<select name="" id="camera3" data-role="flipswitch" data-theme="b" data-mini="true" onchange="isCameraStreamOrStop(this.id)">
					<!-- option set by JS -->
				</select>
			</div>
			
			<div id="webcamTrois" role="main" style="width:100%;">    
				   <noscript><img src="http://tacks.fr:8080/?action=snapshot" alt="Caméra non disponible"></noscript>
			</div>
			
        </div>       
        <!-- Fin page visualisation cam 3-->
        
		
<!-- ######## END page ######## -->

		
        <!--Page menu reglage -->
        <!-- <div data-role="page" id="reglages_page">
            <div data-role="header">
				<a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">Réglages généraux</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home">Tacks</a>
            </div>

            <div role="main" class="ui-content">
                <form>
                    <div class="ui-field-contain">
                        <label for="slider2">Activé mode vacances
                            <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="En savoir plus"></a>:
                        </label>
                        <div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
                            <p>Quand vous activez ce mode, les lumières s'allument et s'éteignent aléatoirement dans la journée pour se protéger des éventuelles tentatives de cambriolage.</p>
                        </div>
                        <select name="slider2" id="slider2" data-role="slider">
                            <option value="off">Non</option>
                            <option value="on">Oui</option>
                        </select>                        
                    </div>                     
                </form>
            </div>        
        </div> /page -->
        
        <!-- Page menu evenement -->
        <div data-role="page" id="evenement_page"> 
            <div data-role="header" style="overflow:hidden;">
				<a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">&Eacute;vènements</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
                <div data-role="navbar" id="navbar">
                    <ul>
                        <li><a href="#" class="ui-btn-active" data-tab-class="tab1">Historique logement</a></li>
                        <li><a href="#" data-tab-class="tab2">Historique réglages</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div><!-- /header -->
            
            <!-- the content markup -->
            <div class="tab-content">
                <div id="historique_logement" class="tab1">
                    <ul id="list_historique_logement" data-role="listview" data-inset="true">
                        <!-- Donnees issues de la BDD -->
                    </ul>
                    <br/><br/>                
                </div>
                <div id="historique_reglages" class="tab2 ui-screen-hidden">
                    <ul id="list_historique_reglage" data-role="listview" data-inset="true">
                        <!-- Donnees issues de la BDD -->
                    </ul>
                </div>
            </div>
        </div><!-- /page -->
        
        <!-- Page menu a propos -->
        <div data-role="page" id="aPropos_page">
            <div data-role="header">
				<a href="#main-page" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">A propos</h1>
				<a href="#conctat-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-mail" style="margin-top : 1%;">Nous contacter</a>
            </div><!-- /header -->

            <div role="main" class="ui-content">
                <p style="font-weight : bold;">Version 2.3 Beta</p>
                <p style="font-weight : bold;">Développé par : </p>

                <ul data-role="listview" data-inset="true">
                <li>
                    <img src="img/photo_equipe/photoSergio.jpg" class="ui-li-thumb">
                    <h2>LEBON Sergio</h2>
                    <p>s.lebon@rt-iut.re</p>
                </li>
                <li>
                    <img src="img/photo_equipe/photoAurelien.jpg" class="ui-li-thumb">
                    <h2>GOFFI Aurélien</h2>
                    <p>aurelien.goffi@gmail.com</p>
                </li>
                <li>
                    <img src="img/photo_equipe/photoThomas.jpg" class="ui-li-thumb">
                    <h2>BATTINELLI Thomas</h2>
                    <p>thomas.battinelli@gmail.com</p>
                </li>
                <li>
                    <img src="img/photo_equipe/photoConstantin.jpg" class="ui-li-thumb">
                    <h2>PUIA Constantin</h2>
                    <p>puia.constantin@yahoo.com</p>
                </li>
                <li>
                    <img src="img/photo_equipe/photoKillian.png" class="ui-li-thumb">
                    <h2>BOUBE Killian</h2>
                    <p>killian.boube@gmail.com</p>
                </li>
            </ul>
            </div><!-- /content -->         
        </div><!-- /page -->
        
<!-- ###### Page contacter -->
        <!-- Page menu a propos -->
        <div data-role="page" id="conctat-page">
            <div data-role="header">
				<a href="#" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">Nous contacter</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->

            <div data-role="main" class="ui-content">
            	<form action="">
            		<span class="ui-btn-inner">
	            			<span class="ui-btn-text">
		            			<label for="subject">Sujet:</label>
			            		<input type="text" name="subject" id="subjectEmail" placeholder="Sujet" value="" data-mini="true" class="ui-input-text ui-body-c">
			            		<label for="message">Votre message:</label>
			            		<textarea cols="40" rows="8" name="message" id="msgEMail"  placeholder="Votre message" data-mini="true" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-mini" style="margin-top: 3.5px; margin-bottom: 3.5px; height: 66px;"></textarea>
            				</span>
            				<p id="paraSendEmail" style="color: blue; display: none;"> Votre email a étét envoyé.</p>
	            	</span>

	            	<p>
	            		<button type="submit" id="sendEmail" data-mini="true" class="ui-btn-hidden" data-disabled="false">Envoyer</button>
            		</p>
            	</form>
	        </div><!-- /content -->           
        </div><!-- /page -->  
        
<!-- ###### Page courbe graphique -->
        <!-- Page menu a propos -->
        <!-- Page menu a propos -->
        <div data-role="page" id="graphic-page">
            <div data-role="header">
				<a href="#" data-rel="back" data-icon="carat-l" data-iconpos="notext" style="margin-top : 1%;">Retour</a>
                <h1 style="margin-left: 1em; margin-right: 1em;">Courbes</h1>
				<a href="#main-page" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-home" style="margin-top : 1%;">Tacks</a>
            </div><!-- /header -->

            <div style="width:80%;height:300px;text-align:center;margin:10px">       
                <div id="flot-placeholder1" style="width:100%;height:100%;"></div>       
            </div>                   
        </div><!-- /page -->
             

        <script type="text/javascript" src="../../platforms/android/assets/www/cordova.js"></script>
       
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/jquery.mobile-1.4.3/jquery.mobile-1.4.3.min.js"></script>
        <script src="js/html5loader/jquery.html5Loader.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="js/panelCtrl.js"></script>
		<script src="js/connexion.js"></script>

		
	    <script src="js/graphics.js"></script>
	    <script type="text/javascript" src="js/flot/jquery.flot.js"></script>
        <script type="text/javascript" src="js/flot/jquery.flot.time.js"></script>   
        <script type="text/javascript" src="js/flot/jquery.flot.symbol.js"></script>
        <script type="text/javascript" src="js/flot/jquery.flot.axislabels.js"></script>
    	
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>